$used-color = #4e5a96
$provided-color = #9b9b9b

.usage-chart-small.usage-chart-container
  height 56px
  overflow hidden

.usage-chart-label
  color $used-color
  font-weight bold
  text-transform uppercase

.usage-chart-small .usage-chart-label
  font-size 12px

.usage-chart-large .usage-chart-label
  font-size 16px

.usage-chart-separator
  background-color $provided-color
  width 100%
  height 1px


.usage-chart-small .usage-chart-separator
  margin 1px 0px

.usage-chart-large .usage-chart-separator
  margin 5px 0px

.usage-chart-used-value
  color $used-color

.usage-chart-provided-value
  color $provided-color

.usage-chart-used-value,  .usage-chart-provided-value
  font-weight bold
  white-space nowrap


.usage-chart-small .usage-chart-used-value,  .usage-chart-small .usage-chart-provided-value
  font-size 12px

.usage-chart-large .usage-chart-used-value,  .usage-chart-large .usage-chart-provided-value
  font-size 14px

.usage-chart-small .usage-chart
  width 60px
  height 70px
  margin-top 25px
  margin-right 10px

.usage-chart-large .usage-chart
  width 120px
  height 130px
  margin-top 25px
  margin-right 10px
